<template>
  <div>
    <el-dialog :visible.sync="visible" :title="dialogTitle" width="550px" class="custom-dialog">
      <div>
        <el-form :model="form" label-width="100px" class="custom-form">
          <slot name="form" :form="form"></slot>
        </el-form>
      </div>
     
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "document",
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
    mode: {
      type: String,
      default: "add", // 默认是添加模式
    },
  },
  data() {
    return {
      visible: false, // 控制弹出层显示
      form: {}, // 表单数据
    };
  },
  computed: {
    dialogTitle() {
      return this.mode === "add" ? "新增信息" : "编辑信息"; // 根据模式设置标题
    },
  },
  watch: {
    formData: {
      immediate: true,
      handler(newData) {
        this.form = { ...newData }; // 同步父组件传递的数据
      },
    },
  },
  methods: {
    open() {
      this.visible = true; // 打开弹出层
    },
    close() {
      this.visible = false; // 关闭弹出层
    },
    submit() {
      this.$emit("submit", { form: this.form, mode: this.mode }); // 将表单数据和模式传递给父组件
      this.close();
    },
    
  },
};
</script>

<style scoped>
.custom-dialog {
  border-radius: 8px;
  padding: 20px;
  /* 新增：设置弹窗背景为黑色和字体为白色 */
  background: #262626 !important;
  color: #fff !important;
}
.custom-form {
  margin-top: 10px;
}
.el-form-item {
  margin-bottom: 20px;
}
.el-input {
  border-radius: 4px;
}
.dialog-footer {
  text-align: right;
  padding: 10px 0;
}
.el-button {
  border-radius: 4px;
}
.upload-demo {
  margin: 20px 0;
}
.el-tab {
  margin: 2px;
  cursor: pointer; /* 添加鼠标悬停效果 */
}
/* 强制 el-dialog 内容背景为黑色 */
::v-deep .el-dialog__wrapper .el-dialog {
  background: #262626 !important;
  color: #fff !important;
}
::v-deep .el-dialog__body,
::v-deep .el-dialog__header {
  background: #262626 !important;
  color: #fff !important;
}
</style>
